import { chainedInstruction } from '@angular/compiler/src/render3/view/util';
import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-wy-slider-handle',
  templateUrl: './wy-slider-handle.component.html',
  styleUrls: ['./wy-slider-handle.component.less'],
  changeDetection:ChangeDetectionStrategy.OnPush

})
export class WySliderHandleComponent implements OnInit,OnChanges{

  // 水平、垂直
  // 水平：改变滑块按钮left值，改变进度条的width
  // 垂直：改变滑块按钮bottom值，改变进度条的height
  @Input() wyVertical = false;
  // 偏移量
  @Input() wyOffset!:number;
  style: any;
  constructor() { }
  // 
  ngOnChanges(changes: SimpleChanges): void {
    // 监听偏移量的改变，改变按钮的位置
    if(changes['wyOffset']){
      this.style[this.wyVertical ? 'bottom' : 'left'] = this.wyOffset + "%";
    }
    
  }

  ngOnInit(): void {
  }

}
